<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>看看生物们</title>
    <link rel="stylesheet" type="text/css" href="css/lunbo.css">
    <link rel="stylesheet" type="text/css" href="css/rotation.css">
    <link rel="stylesheet" type="text/css" href="css/nav.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/myButton.css">
    <link rel="stylesheet" type="text/css" href="css/layout.css">
    <link rel="stylesheet" type="text/css" href="css/share.css">
    <link rel="stylesheet" type="text/css" href="css/link.css">
    <link rel="stylesheet" type="text/css" href="css/search.css">
    <link rel="stylesheet" type="text/css" href="css/shapes.css">
    <link rel="stylesheet" type="text/css" href="css/animation.css">
    <link rel="stylesheet" type="text/css" href="css/color.css">
    <link rel="stylesheet" type="text/css" href="css/square.css">
    <link rel="stylesheet" type="text/css" href="css/time.css">
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <link rel="stylesheet" type="text/css" href="css/info.css">
    <link rel="stylesheet" type="text/css" href="css/font.css">
    <link type="text/css" href="css/font-awesome.min.css"
          rel="stylesheet">
    <!--    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->

</head>
<body class="selection-blue">
<a id="top"></a>
<header><h1 class="hover-right-btn hover-text-shadow">看看生物们</h1>


</header>



<nav>
    <div id="nav">
        <!--    ul>li*5>a[href="#"]   tab -->
        <!--    内容 {} ,光标在哪里他就在哪里生成-->
        <ul class="hover-slow">
            <li><a  class="selected-nav" href="animals.html">首页</a></li>
            <li><a class="hover-show" href="#">动物分类</a>
                <!--            ul>li*3>a[href="#"]-->
                <ul>
                    <li><a href="cat.html">猫</a></li>
                    <li><a href="dog.html">狗</a></li>
                    <li><a href="#">猪</a></li>
                </ul>
            </li>
            <!--            <li><a href="erciyuan.html">去二次元</a></li>-->
            <!--            <li><a href="fantasyTown.html">去幻想乡</a></li>-->

            <li class=""><a  href="腔肠动物门.html">腔肠动物门</a></li>
            <li class=""><a  class="" href="Kingdom.html">界</a></li>
            <li class=""><a  class="" href="脊索模块.html">脊索模块</a></li>

            <!--            <li class=""><a  href="AnimalKingdom.html">动物界</a></li>-->

            <li><a href="aboutUs.html">关于我们</a></li>
            <li><a href="contactUs.html">联系我们</a></li>
            <!--            <li><a href="beautiful.html">魔幻世界</a></li>-->
            <!--            <li><a href="ABYSS.html">阿比斯</a></li>-->
            <!--            <li><a href="contactUs.html">联系我们</a></li>-->
        </ul>
        <div class="" id="currentTime"></div>
    </div>
</nav>
<!--        <div class="cart-btn">-->
<!--            <a id="cart-a" href="#">购物车</a>-->
<!--        </div>-->

<!--<button class="Button SearchBar-askButton Button&#45;&#45;primary Button&#45;&#45;blue" id="goContactUs">联系我们</button>-->
<!--<button class="Button SearchBar-askButton Button&#45;&#45;primary Button&#45;&#45;blue" id="goBeautifulPage">beautiful page</button>-->

<!--cols-->
<!--main-content-zoo-->
<div class=" bg-whitesmoke col">
    <div class="cols">
        <!--    左边列表-->
<!--        分享-->
        <div class="col">
            <section class="title-bar" style="background-color:rebeccapurple;">

                <p style="color:white;">分享到：</p>
                <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a>
                    <a href="#" class="bds_qzone" data-cmd="qzone"></a><a
                            href="#" class="bds_tsina" data-cmd="tsina"></a><a href="#" class="bds_tqq"
                                                                               data-cmd="tqq"></a><a
                            href="#" class="bds_renren" data-cmd="renren"></a><a href="#" class="bds_weixin"
                                                                                 data-cmd="weixin"></a>
                </div>
                <script>
                </script>
            </section>

            <section id="listAnimals" class="move-up-picture"
                     style="background-color:dodgerblue;width: 300px;color: white;">
                <span class="icon-sell"></span>
                <h2 class="hover-right-btn hover-text-shadow hover-slow" style="text-indent: 10px;">动物们</h2>
                <ul class="hover-slow">

                </ul>
            </section>
        </div>
        <!--        width-30vw-->
        <!--    轮播图-->
        <div id="adv" class="border rotation-border  " style="">
            <dl>
                <dd><a href="#"><img class="img-border  " src="images/b-ad1.jpg" id="banner" alt="广告"/></a></dd>
                <dt><a class="hover-big" id="a1">1</a> <a class="hover-big" id="a2">2</a>
                    <a class="hover-big" id="a3">
                        3</a>
                    <a class="hover-big" id="a4">4</a></dt>
                <!--            href="#"-->
            </dl>
        </div>


        <!--        右边列表-->

        <div class="col">

            <div class="box-right float-right" style="background-color:purple">
                <h3 class="hover-big hover-right-btn">生物分类等级</h3>
                <ul class="list-box hover-shadow hover-shadow-list-pink hover-big-list">
                    <li><a href="Kingdom.html">界Kingdom</a></li>
                    <li><a href=" ">门Phylum</a></li>
                    <li><a href=" ">亚门Subphylum</a></li>
                    <li><a href=" ">总纲Superclass</a></li>
                    <li><a href=" ">纲Class</a></li>
                    <li><a href=" ">亚纲Subclass</a></li>
                    <li><a href=" ">总目Superorder</a></li>
                    <li><a href=" ">目Order</a></li>
                    <li><a href=" ">亚目Suborder</a></li>
                    <li><a href=" ">总科Superfamily（－ oidea）</a></li>
                    <li><a href=" ">科Family（－idae）</a></li>
                    <li><a href=" ">亚科Subfamily（－inae）</a></li>
                    <li><a href=" ">属Genus</a></li>
                    <li><a href=" ">亚属Subgenus</a></li>
                    <li><a href=" ">种Species</a></li>
                    <li><a href=" ">亚种Subspecies</a></li>
                </ul>
            </div>
            <div class="width-20vw">
                <h2 class="para-level-3 hover-right-btn">关于我们</h2>
                <p> 动物（Animal）是生物的一个种类。它们一般以有机物为食，能感觉，可运动，能够自主运动。活动或能够活动之物。包括人。 </p>
                <!--        <p>     根据化石研究，地球上最早出现的动物源于海洋。早期的海洋动物经过漫长的地质时期，逐渐演化出各种分支，丰富了早期的地球生命形态。在人类出现以前，史前动物便已出现，并在各自的活动期得到繁荣发展。后来，它们在不断变换的生存环境下相继灭绝。但是，地球上的动物仍以从低等到高等、从简单到复杂的趋势不断进化并繁衍至今，并有了如今的多样性。 </p>-->
                <!--        <p>     科学家们把现存的人类已知的动物根据体内有无脊柱分为无脊椎动物和脊椎动物两大种类。 </p>-->
                <!--        <p>     科学家已经鉴别出46900多种脊椎动物。包括鲤鱼、黄鱼、草鱼等鱼类动物，蛇、蜥蜴等爬行类动物，青蛙、娃娃鱼等两栖类动物，鸟类以及红熊猫等哺乳类动物。 </p>-->
                <!--        <p>     科学家们还发现了130多万种无脊椎动物。这些动物中多数是昆虫，昆虫中多数是甲虫。鼻涕虫、蚯蚓、乌贼、牡蛎、红海星、水母、蜘蛛、珊瑚虫、放射虫、蛔虫、猪肉绦虫、沙蚕、蜗牛、蛞蝓等都属于无脊椎动物。 </p>-->
                <!--        <p>     动物界所有成员的身体都是由细胞组成的异养有机体。 </p>-->
            </div>
        </div>
    </div>

    <!--    珍稀动物-->
    <!--    width-30vw-->
    <!--    width-90vw-->
    <!--    width-90vw-->
    <div class="width-30vw ">
<!--        grid-four-12vw-->
        <fieldset class="grid-four margin-left-10vw ">
            <legend class="font-size-25">珍稀动物</legend>
            <div class="grid-four">
                <div class="grid-four-item">
                    <h2 class="para-level-3 hover-right-btn">
                        安哥洛卡象龟</h2>
                    <img class="hover-big hover-big-1-1" src="images/安哥洛卡象龟.jfif">
                    <button class=" box box-5vw purple hover-shake">详细内容</button>
                </div>
                <div class="grid-four-item">
                    <h2 class="para-level-3 hover-right-btn">
                        苏门答腊犀牛</h2>
                    <img class="hover-big hover-big-1-1" src="images/西门达拉犀牛.jfif">
                    <button class=" box box-5vw purple hover-shake">详细内容</button>
                </div>
                <!--            <div>-->
                <!--            金丝猴-->
                <!--            <img src="images/金丝猴.jfif"></div>-->
                <div class="grid-four-item ">
                    <h2 class="para-level-3 hover-right-btn">
                        雪豹</h2>
                    <img class="hover-big hover-big-1-1" src="images/雪豹.jfif">
                    <button class=" box box-5vw purple hover-shake">详细内容</button>
                </div>
                <div class="grid-four-item">
                    <h2 class="para-level-3 hover-right-btn">
                        黑冠长臂猿</h2>
                    <img class="hover-big hover-big-1-1" src="images/黑冠长臂猿.jfif" alt="">
                    <button class=" box box-5vw purple hover-shake">详细内容</button>
                </div>
            </div>
        </fieldset>
    </div>
</div>
<!--版权信息-->
<div id="copyright" class="copyright">
    <div>Copyright (C) <a href="animals.html">生物们！</a> 2016-2018, All Rights Reserved | 动物宠爱经营许可证
        <a href="http://jigsaw.w3.org/css-validator/check/referer">
            <img style="border:0;width:31px;height:31px" src="images/heart.png" alt="Valid CSS!">
        </a>
    </div>
    <address>通讯地址：杜王町 &nbsp;&nbsp;电话：（010）87878787&nbsp;&nbsp;网管信箱：joske@diamond.jojo.bangumi.com</address>
</div>

<div id="gotop" class=" ">
    <!--    style="line-height:40px; text-align:center;"-->
    <a href="#top" class=" "> <i class="fa fa-arrow-up center-block hover-circle hover-rotate purple" title="回到顶部"
                                 style="width: 20px;height: 20px"></i></a>
</div>

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/strutil.js" type="text/javascript"></script>
<script src="js/pushList.js" type="text/javascript"></script>
<!--<script src="js/rotation.js" type="text/javascript"></script>-->
<script src="js/button.js" type="text/javascript"></script>
<script src="js/share.js" type="text/javascript"></script>
<script src="js/time.js" type="text/javascript"></script>
<script src="js/rotationNoCircle.js" type="text/javascript"></script>
</body>
</html>